import React, { Component } from 'react';
import { observable, action } from 'mobx';
import {observer} from 'mobx-react';

const appState = observable({
    timer: 0
});

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

@observer
class TimerView extends Component {
    render() {
      return (
        <button onClick={this.onReset.bind(this)}>
          Seconds passed: {this.props.appState.timer}
        </button>
      );
    }

    onReset () {
        this.props.appState.resetTimer();
    }
}

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <TimerView appState={appState}></TimerView>
      </div>
    )
  }
}

export default Timer;
